<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>搜索</title>
    <link href="./css/mui.css" rel="stylesheet">
    <link href="./css/common.css" rel="stylesheet">
</head>

<body>
<div class="mui-content">
    <div id="search">
        <div class="search_left">
            <div class="mui-input-row mui-search">
                <input id="goSearch" type="search" class="mui-input-clear" placeholder="输入资源名称">
            </div>
        </div>
        <div class="search_right mui-action-back">取消</div>
    </div>

    <div class="top_title">
        <div class="mui-pull-left title">历史搜索</div>
        <a id="clearHistory" class="mui-icon mui-icon-trash mui-pull-right"></a>
    </div>
    <div class="search_details">
        <div class="searchHostory" id="current">
        </div>
    </div>

    <div class="top_titles">
        <div class="mui-pull-left title">热门搜索</div>
    </div>
    <div class="search_details">
        <div class="searchHostory" id="hot">
        </div>
    </div>
</div>
<script src="./js/mui/mui.min.js"></script>
<script>
    var context_path = "/jlitetest";
    mui.ready(function () {
        window.parent.document.querySelector('.mui-title').textContent = "搜索";
        // mui.alert("你搜索了：" + document.getElementById("goSearch").value);
        mui.ajax(context_path + "/search/current.yx", {
            data: {
                username: 'username',
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                buildCurrent(data);
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                mui.alert(type);
            }
        });

        mui.ajax(context_path + "/search/hot.yx", {
            data: {
                username: 'username',
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                buildHot(data);
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                mui.alert(type);
            }
        });
        //监听搜索跳转
        window.addEventListener('gotoSearch', function (event) {
            var _keyWord = document.querySelector("#goSearch").value;
            document.querySelector("#goSearch").value = "";
            if (_keyWord) {
                window.location.href = context_path + `/list.html?keyWord=${_keyWord}`;
            } else {
                window.location.href = context_path + "/list.html";
            }
        });

        //删除搜索记录
        document.getElementById("clearHistory").addEventListener("click", function () {
            var btnArray = ['确认', '取消'];
            mui.confirm('确认删除搜索记录吗？', '提示', btnArray, function (e) {
                if (e.index === 0) {
                    mui("#hostroy").innerHTML = "";
                }
            });
        });
        //监听搜索完成事件
        document.getElementById("goSearch").addEventListener("keydown", function (e) {
            if (13 === e.keyCode) { //点击了“搜索”
                document.activeElement.blur(); //隐藏软键盘
                var _keyWord = document.getElementById("goSearch").value;
                if (_keyWord) {
                    window.location.href = context_path + `/list.html?keyWord=${_keyWord}`;
                } else {
                    window.location.href = context_path + "/list.html";
                }
            }
        }, false);
    });

    function buildCurrent(dataArr) {
        var liStr = "";
        for (let i = 0; i < dataArr.length; i++) {
            liStr += `<li class="keyWord">${dataArr[i]}</li>`;
        }
        document.querySelector("#current").innerHTML = `<ul>${liStr}</ul>`;
        bindTapKey();
    }

    function buildHot(dataArr) {
        var liStr = "";
        for (let i = 0; i < dataArr.length; i++) {
            liStr += `<li class="keyWord">${dataArr[i]}</li>`;
        }
        document.querySelector("#hot").innerHTML = `<ul>${liStr}</ul>`;
        bindTapKey();
    }

    function bindTapKey() {
        //选中搜索记录
        document.querySelectorAll(".keyWord").forEach(function (elem) {
            elem.addEventListener("click", function () {
                let _keyword = elem.textContent;
                if (_keyword) {
                    window.location.href = context_path + `/list.html?keyWord=${_keyword}`;
                } else {
                    window.location.href = context_path + "/list.html";
                }
            });
        });
    }

</script>
</body>
</html>